
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>SUI Mobile Demo</title>
    <meta name="description" content="MSUI: Build mobile apps with simple HTML, CSS, and JS components.">
    <meta name="author" content="阿里巴巴国际UED前端">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1">
    <link rel="shortcut icon" href="../../favicon.ico">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no">

    <!-- Google Web Fonts -->


    <link rel="stylesheet" href="../../dist/css/sm.min.css">
    <link rel="stylesheet" href="../../dist/css/sm-extend.min.css">
    <link rel="stylesheet" href="../../assets/css/demos.css">

    <link rel="apple-touch-icon-precomposed" href="../../assets/img/apple-touch-icon-114x114.png">
    <script src="../../assets/js/jquery.min.js"></script>
    <script src="../../assets/js/config.js"></script>
     
    
  </head>
  <body>
      <div class="page">
          <header class="bar bar-nav">
            <h1 class='title'>列表</h1>
          </header>
          <div class="content">
            <div class="content-block-title">图标、标题和副标题</div>
            <div class="list-block">
              <ul>
                <li class="item-content">
                  <div class="item-media"><i class="icon icon-f7"></i></div>
                  <div class="item-inner">
                    <div class="item-title">商品名称</div>
                    <div class="item-after">HHHH</div>
                  </div>
                </li>
                <li class="item-content">
                  <div class="item-media"><i class="icon icon-f7"></i></div>
                  <div class="item-inner">
                    <div class="item-title">型号</div>
                    <div class="item-after">美好醒</div>
                  </div>
                </li>
                <li class="item-content">
                  <div class="item-media"><i class="icon icon-f7"></i></div>
                  <div class="item-inner">
                    <div class="item-title">库存</div>
                    <div class="item-after">123件</div>
                  </div>
                </li>
              </ul>
            </div>
            <div class="content-block-title">标题和副标题</div>
            <div class="list-block">
              <ul>
                <li class="item-content">
                  <div class="item-inner">
                    <div class="item-title">商品名称</div>
                    <div class="item-after">HHHH</div>
                  </div>
                </li>
                <li class="item-content">
                  <div class="item-inner">
                    <div class="item-title">型号</div>
                    <div class="item-after">美好醒</div>
                  </div>
                </li>
                <li class="item-content">
                  <div class="item-inner">
                    <div class="item-title">库存</div>
                    <div class="item-after">123件</div>
                  </div>
                </li>
              </ul>
            </div>
            <div class="content-block-title">带箭头</div>
            <div class="list-block">
              <ul>
                <li class="item-content item-link">
                  <div class="item-media"><i class="icon icon-f7"></i></div>
                  <div class="item-inner">
                    <div class="item-title">商品名称</div>
                    <div class="item-after">HHHHH</div>
                  </div>
                </li>
                <li class="item-content item-link">
                  <div class="item-media"><i class="icon icon-f7"></i></div>
                  <div class="item-inner">
                    <div class="item-title">型号</div>
                    <div class="item-after">美好醒</div>
                  </div>
                </li>
                <li class="item-content item-link">
                  <div class="item-media"><i class="icon icon-f7"></i></div>
                  <div class="item-inner">
                    <div class="item-title">库存</div>
                    <div class="item-after">123件</div>
                  </div>
                </li>
              </ul>
            </div>
          </div>
        </div>

    <script>
    $(function() {
      $(document).on("pageInit", function() {
        $("#show-toast").click(function() {
          $.toast("操作成功");
        });
      });
      $.init();
    });
    </script>
    <script src="../../dist/js/sm.js"></script>
    <script src="../../dist/js/sm-extend.js"></script>
    <script src="../../dist/js/sm-city-picker.js"></script>
    <script src="../../assets/js/demos.js"></script>
  </body>
</html>
